<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="searchParm" :inline="true" size="default">
            <el-form-item label="">
                <el-input v-model="searchParm.realName" placeholder="通过真实姓名搜索">
                    <template #suffix>
                        <el-button icon="CloseBold" @click="resetBtn" type="text" style="padding: 0;"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <!-- <el-button type="primary" icon="CirclePlus" @click="addBtn">新增</el-button> -->
            </el-form-item>
        </el-form>

        <!-- 认证用户表格 -->
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column prop="authId" label="认证ID"></el-table-column>
            <el-table-column prop="userId" label="用户ID"></el-table-column>
            <el-table-column prop="realName" label="真实姓名"></el-table-column>
            <el-table-column prop="studentId" label="学号"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="college" label="二级学院"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column label="身份证照片">

                <template #default="scope">
                    <!-- 使用 img 标签展示图片 -->
                    <img :src="scope.row.idcardPhoto" alt="身份证照片" style="width: 100px; height: auto;" />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <!-- <el-button type="primary" size="small" @click="editBtn(scope.row)">编辑</el-button> -->
                    <el-button type="danger" size="small" @click="delBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange"
            :current-page.sync="searchParm.currentPage" :page-sizes="[10, 20, 40, 80, 100]"
            :page-size="searchParm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total">
        </el-pagination>
    </el-main>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { queryUserAuthListApi, deleteUserApi } from "@/api/userauth/index";
import { UserAuth } from "@/api/userauth/userModel";
import { Title } from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance"

// 全局变量
const { global } = useInstance()

// 弹窗绑定对象
const { dialog, onClose } = useDialog();
const searchParm = reactive({
    realName: "",
    pageSize: 10,
    currentPage: 1,
    total: 0,
});

const tableList = ref([]);
const tableHeight = ref(0);

// 表单ref属性
const addRef = ref<FormInstance>();
// 获取用户认证列表
const getUserAuthList = async () => {
    const result = await queryUserAuthListApi(searchParm);
    if (result && result.code == 200) {
        console.log("获取用户认证列表成功", result.data.records);
        tableList.value = result.data.records;
        searchParm.total = result.data.total;
    }
};

// 新增or编辑判断标志 0新增 1编辑
const editFlag = ref("");
// 新增按钮点击事件
const addBtn = () => {
    // 标题
    dialog.title = Title.EDIT;
    editFlag.value = "0";
    // 设置弹窗高度！！
    dialog.height = 450;
    dialog.visible = true;
    console.log("新增按钮点击事件");
    // 新增编辑用的同一个弹框，使用新增时需清空表单
    addRef.value?.resetFields();
};
const searchBtn = () => {
    console.log("搜索按钮点击事件");
    console.log('搜索参数:', searchParm.realName); // 打印搜索条件
    getUserAuthList();
};

const resetBtn = () => {
    searchParm.realName = "";
    getUserAuthList();
};

const editBtn = (row: UserAuth) => {
    console.log("编辑", row);
    // 这里可以添加跳转或弹窗逻辑
};

const delBtn = async (row: UserAuth) => {
    console.log("删除按钮点击事件", row);
    // 找到$confirm 
    console.log(global)
    // 注意async和await成对使用
    const confirm = await global.$myconfirm("确认删除吗？");
    if (confirm) {
        console.log(row.authId)
        console.log(row.userId)

        const result = await deleteUserApi(row.authId);
        if (result && result.code == 200) {
            console.log("删除成功");
            ElMessage.success(result.msg);
            // 刷新列表数据
            getUserAuthList();

        }
    } else {
        console.log("取消删除");
    }

};

// 页码大小改变事件
const sizeChange = (pageSize: number) => {
    console.log("页码大小改变事件", pageSize);

};
// 页码改变事件
const currentChange = (currentPage: number) => {
    console.log("页码改变事件", currentPage);
    searchParm.currentPage = currentPage;
    getUserAuthList();
};
// 页面加载完成后重新获取表格数据

onMounted(() => {
    // 获取表格高度
    tableHeight.value = document.documentElement.clientHeight - 200;
    // tableHeight.value = window.innerHeight - 200;
    // 获取列表数据
    getUserAuthList();
    console.log("页面加载完成");
});
</script>

<style scoped></style>